<style scoped>

  table {
      border-collapse: collapse;
      width: 100%;
  }

  th,
  td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
  }

  th {
      background-color: #f2f2f2;
  }
</style>
<template>
    <el-button @click="exportToPDF">导出为PDF</el-button>
    <el-button @click="exportTo_j_word">导出为WORD_JQUERY_V</el-button>
    <achievement_word_export></achievement_word_export>
    <div class="outerBox">
        <div class="sidebar">
            <el-aside>
                <el-menu :default-active="activeMenu" @select="handleMenuSelect" class="sidebar-menu">
                    <el-menu-item index="basic-info">一、课程基本信息</el-menu-item>
                    <el-menu-item index="objectives">二、课程目标及权重确定</el-menu-item>
                    <el-menu-item index="quantitative-analysis">三、达成度定量分析</el-menu-item>
                    <el-menu-item index="summary-improvement">四、总结及改进措施</el-menu-item>
                    <el-menu-item index="evaluation-confirmation">五、评价合理性确认</el-menu-item>
                </el-menu>
            </el-aside>
        </div>
        <div class="content-to-export" direction="vertical">
            <el-header class="headerTest">
                <h1>《数据结构》课程目标达成度评价</h1>
            </el-header>
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>25</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>30</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>王五</td>
                        <td>28</td>
                        <td>广州</td>
                    </tr>
                </tbody>
            </table>
            <el-card id="basic-info" class="box-card">
                <div class="card-header">
                    <span>一、课程基本信息</span>
                </div>
                <div class="table-container">
                    <el-card class="tableCard">
                        <el-table class="leftTableOF_tableCard" :show-header=false stripe
                            :data="courseBasicInfo.slice(0, 4)" border>
                            <el-table-column width="180" prop="item">
                            </el-table-column>
                            <el-table-column prop="content">
                            </el-table-column>
                        </el-table>
                        <el-table class="rightTableOF_tableCard" :show-header=false stripe
                            :data="courseBasicInfo.slice(4, 10) " border>
                            <el-table-column width="180" prop="item">
                            </el-table-column>
                            <el-table-column prop="content">
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-card>
            <el-card id="objectives" class="box-card avoid-page-break">
                <div class="card-header">
                    <span>二、课程目标及权重确定</span>
                </div>
                <div class="statementBox">
                    <div>
                        根据软件工程专业认证标准要求，该课程的课程目标如下：
                    </div>
                    <ol>
                        <li>
                            课程目标1：知识教学目标 — 认识计算机应用中数据对象的特性，数据结构及其分类；具有各种数据的逻辑结构、存储结构、相应算法及其之间关系的相关知识。
                        </li>
                        <li>
                            课程目标2：基础能力培养目标 — 能应用数据结构的基础理论知识，具备各种数据结构及其算法的理论知识与设计技能，能设计各种基本数据结构和实现方法，并用于编制高效可靠的程序。
                        </li>
                        <li>
                            课程目标3：综合应用能力培养 — 能针对实际应用问题进行分析，合理地选择相应的数据结构，并进行算法设计与实现。
                        </li>
                    </ol>
                </div>
                <el-card class="tableCard">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="targetName" label="课程目标" width="180">
                        </el-table-column>
                        <el-table-column prop="pointName" label="毕业要求指标点名称" width="180">
                        </el-table-column>
                        <el-table-column prop="pointDeep" label="等级" width="100">
                            <template v-slot="scope">
                                <el-tag v-if="scope.row.pointDeep === 'L'" type="success">L</el-tag>
                                <el-tag v-if="scope.row.pointDeep === 'M'" type="warning">M</el-tag>
                                <el-tag v-if="scope.row.pointDeep === 'H'" type="danger">H</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <el-table stripe :data="evaluationMatrix" border style="width: 100% ;border:2px solid #e7dede;">
                        <el-table-column width="120px">
                            <template #header>
                                <div class="diagonal-split-header">
                                    <div class="text-part" style="bottom: 37px; right: 0;">毕业要求</div>
                                    <div class="text-part" style="top: 37px; left: 0;">课程目标</div>
                                    <div class="diagonal-line"></div>
                                </div>
                            </template>
                            <template #default="scope">
                                {{ scope.row.criteria }}
                            </template>
                        </el-table-column>
                        <el-table-column label="工程知识">
                            <el-table-column prop="ek1" label="1-1" width="70px"></el-table-column>
                            <el-table-column prop="ek2" label="1-2" width="70px"></el-table-column>
                            <el-table-column prop="ek3" label="1-3" width="70px"></el-table-column>
                            <el-table-column prop="ek4" label="1-4" width="70px"></el-table-column>
                        </el-table-column>
                        <el-table-column label="问题分析">
                            <el-table-column prop="pa1" label="2-1" width="70px"></el-table-column>
                            <el-table-column prop="pa2" label="2-2" width="70px"></el-table-column>
                            <el-table-column prop="pa3" label="2-3" width="70px"></el-table-column>
                        </el-table-column>
                        <el-table-column label="设计/开发解决方案">
                            <el-table-column prop="ds1" label="3-1" width="90px"></el-table-column>
                            <el-table-column prop="ds2" label="3-2" width="90px"></el-table-column>
                            <el-table-column prop="ds3" label="3-3" width="90px"></el-table-column>
                            <el-table-column prop="ds4" label="3-4" width="90px"></el-table-column>
                        </el-table-column>
                    </el-table> -->
                </el-card>
            </el-card>
            <el-card id="quantitative-analysis" class="box-card avoid-page-break">
                <div class="card-header">
                    <span>三、达成度定量分析</span>
                </div>
                <div>
                    <div class="statementBox">
                        该课程总成绩100分，由过程性考核和结果性考核两部分组成。过程性考核占总成绩比例40%，结果性考核占总评成绩的比例为60%，具体见下表考核成绩评定办法。</div>
                    <el-card class="tableCard">
                        <el-table stripe :data="quantitativeAnalysisData" border
                            style="width: 100%;border:2px solid #e7dede;" :span-method="spanMethod">
                            <el-table-column prop="courseObjective" label="课程目标" width="220"></el-table-column>
                            <el-table-column prop="supportLink" label="支撑环节" width="340"></el-table-column>
                            <el-table-column prop="weight" label="权重系数" width="400"></el-table-column>
                        </el-table>
                    </el-card>

                </div>
                <div class="statementBox">该课程2022级2班学生成绩具体计算详见2202班《数据结构》课程达成度分析成绩成绩表.xls附件文件，主要是学生成绩表。各教学环节达成度计算如下：
                </div>

                <div class="supportLink">
                    <span>支撑环节1--课堂表现</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="classPerformanceData" style="width: 100%" border>
                    <el-table-column prop="courseObjective" label="课程目标" width="120px">
                    </el-table-column>
                    <!-- <el-table-column prop="supportLink" label="课堂表现">
                    </el-table-column> -->
                    <el-table-column prop="totalValue" label="总分值" width="120px">
                    </el-table-column>
                    <el-table-column prop="averageScore" label="学生平均分">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="120px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：课堂表现占总成绩的10%，主要是课堂提问。
                </div>
                <div class="supportLink">
                    <span>支撑环节2--课程作业</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="homeworkPerformanceData" border style="width: 100%">
                    <el-table-column prop="courseObjective" label="课程目标" width="120px">
                    </el-table-column>
                    <el-table-column prop="supportLink" label="课程作业">
                    </el-table-column>
                    <el-table-column prop="totalValue" label="总分值" width="120px">
                    </el-table-column>
                    <el-table-column prop="averageScore" label="学生平均分">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="120px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：课程作业占总成绩的30%，包含4个作业。作业1和2为线性表作业，含顺序存储与链式存储，对应课程目标1；作业3为树作业，对应课程目标2；作业4为图作业，对应课程目标3。
                </div>
                <div class="supportLink">
                    <span>支撑环节3--期末考试</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="examPerformanceData" border style="width: 100%">
                    <el-table-column prop="courseObjective" label="课程目标" width="120px">
                    </el-table-column>
                    <el-table-column prop="question" label="题号">
                    </el-table-column>
                    <el-table-column prop="totalValue" label="总分值" width="120px">
                    </el-table-column>
                    <el-table-column prop="averageScore" label="学生平均分">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="120px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：期末考试共3大题，第一题对应课程目标1，第二题对应课程目标2，第三题对应课程目标3。
                </div>
                <div class="supportLink">
                    <span>四、课程目标达成度</span>
                </div>
                <el-table :row-style="tableRowClassName" :data="courseAchievementData" border style="width: 100%">
                    <el-table-column prop="courseObjective" label="课程目标" width="320px">
                    </el-table-column>
                    <el-table-column prop="supportLinks" label="支撑环节">
                    </el-table-column>
                    <el-table-column prop="completion" label="达成度" width="320px">
                    </el-table-column>
                </el-table>
                <div class="descBox">
                    说明：课程目标达成度=课堂表现达成度×0.1+课程作业达成度×0.3+期末考试达成度×0.6。
                </div>
            </el-card>
            <el-card id="summary-improvement" class="box-card avoid-page-break">
                <div class="card-header">
                    <span>四、总结及改进措施</span>
                </div>
                <el-table :data="summaryImprovementData" border style="width: 100%">
                    <el-table-column prop="item" label="项目" width="180">
                    </el-table-column>
                    <el-table-column prop="description" label="描述">
                        <template #default="scope">
                            <el-input v-model="scope.row.description" size="mini"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button plain style="margin-top: 10px;" type="primary" @click="saveSummaryImprovement">保存</el-button>
            </el-card>
            <el-card id="evaluation-confirmation" class="box-card avoid-page-break">
                <div class="card-header">
                    <span>五、评价合理性确认</span>
                </div>
                <el-table :data="evaluationConfirmationData" border style="width: 100%">
                    <el-table-column prop="role" label="评价责任人" width="100">
                    </el-table-column>
                    <el-table-column label="课程目标达成度评价合理性">
                        <el-table-column prop="fullApproval" label="合理" width="140px">
                            <template #default="scope">
                                <el-input v-model="scope.row.fullApproval" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="partialApproval" label="基本合理" width="120px">
                            <template #default="scope">
                                <el-input v-model="scope.row.partialApproval" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="noApproval" label="不合理" width="120px">
                            <template #default="scope">
                                <el-input v-model="scope.row.noApproval" size="mini"></el-input>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="课程质量持续改进措施">
                        <el-table-column prop="fullDisapproval" label="可行" width="120px">
                            <template #default="scope">
                                <el-input v-model="scope.row.fullDisapproval" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="partialDisapproval" label="基本可行" width="120px">
                            <template #default="scope">
                                <el-input v-model="scope.row.partialDisapproval" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="noDisapproval" label="不可行" width="120px">
                            <template #default="scope">
                                <el-input v-model="scope.row.noDisapproval" size="mini"></el-input>
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="签字（章）">
                        <el-table-column prop="fullDisapproval" width="120px">
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-button plain style="margin-top: 10px;" type="primary"
                    @click="saveEvaluationConfirmation">保存</el-button>
            </el-card>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
// import { evaluationMatrix, evaluationConfirmationData, summaryImprovementData, courseAchievementData, examPerformanceData, classPerformanceData, homeworkPerformanceData, courseBasicInfo, quantitativeAnalysisData, spanMethod } from './dataSET'
// import export_word from './export_word'
import { getAnalysis_data } from '@/api/target_item_info_input'
// import export_word from './export_word.vue'
import eventBus from '/eventBus'
import achievement_word_export from '@/components/achievement_word_export.vue'
// 激活的菜单项，默认为第一个
const activeMenu = ref('basic-info');
import html2pdf from 'html2pdf.js'
import $ from 'jquery'
import '@/utils/jqureyWordExport'
const exportTo_j_word=()=>{
    let date = new Date().toLocaleDateString()
    let docx = '导出测试' + date
    $(".content-to-export").wordExport(docx);

}
const tableData = ref([
    {
        targetName: "课程目标1",
        pointName: "毕业要求指标点 1.2",
        pointDeep: "H"
    },
    {
        targetName: "课程目标2",
        pointName: "毕业要求指标点2.1",
        pointDeep: "L"
    },
    {
        targetName: "课程目标3",
        pointName: "毕业要求指标点3.3",
        pointDeep: "L"
    },
]);
let evaluationMatrix = ([
    {
        criteria: '课程目标1',
        ek1: 'M', ek2: '', ek3: '', ek4: '',
        pa1: '', pa2: '', pa3: '',
        ds1: '', ds2: '', ds3: '', ds4: ''
    },
    {
        criteria: '课程目标2',
        ek1: '', ek2: '', ek3: '', ek4: '',
        pa1: 'H', pa2: '', pa3: '',
        ds1: '', ds2: '', ds3: '', ds4: ''
    },
    {
        criteria: '课程目标3',
        ek1: '', ek2: '', ek3: '', ek4: '',
        pa1: '', pa2: '', pa3: '',
        ds1: '', ds2: '', ds3: 'M', ds4: ''
    },
]);
const evaluationConfirmationData = ([
    { role: '评价组/系主任', fullApproval: '✔', partialApproval: '', noApproval: '', fullDisapproval: '', partialDisapproval: '' },
    { role: '教学副院长', fullApproval: '', partialApproval: '✔', noApproval: '', fullDisapproval: '', partialDisapproval: '' }
]);

let summaryImprovementData = ref([
]);
let courseAchievementData = ref([
]);
let examPerformanceData = ref([
]);
let classPerformanceData = ref([
]);
let homeworkPerformanceData = ref([
]);
let courseBasicInfo = ref([
]);
let quantitativeAnalysisData = ref([
]);
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex === 0) {
        if (row.courseObjective.startsWith('课程目标')) {
            return {
                rowspan: 3,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
};
// 组件挂载后添加滚动监听器
onMounted(async() => {
    const DataToSubmit =eventBus.state.DataToSubmit
    const studentCount =eventBus.state.studentCount
    const submitOBJ={
        DataToSubmit,
        studentCount
    }
    const res = await getAnalysis_data(1, 1, 'A', submitOBJ)
    console.log("res",res.data.content);
    courseBasicInfo.value = res.data.content.returnClassMes
    let cnt=0
    quantitativeAnalysisData.value = res.data.content.returnAssessment.map(item => {
            // console.log("item",item);
            if(cnt !==0){
                item.courseObjective=''
            }
            if(cnt===2){
                cnt = 0
                return item;
            }
            cnt++
            return item
        }
    )
    classPerformanceData.value = res.data.content.returnnewArray
    homeworkPerformanceData.value = res.data.content.returnTaskMes



    // courseAchievementData.value = res.data.content.returnTargetAchievement
    
    const container = document.querySelector('.content-to-export');
    container.addEventListener('scroll', updateSidebarHighlight);
});
const exportToPDF = () => {
    const element = document.querySelector('.content-to-export');
    const options = {
        margin: [10, 5, 10, 5],
        filename: 'exported-file.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 3, pagebreak: { mode: 'avoid-all', before: '.avoid-page-break', after: '.avoid-page-break' } },
        // jsPDF: { unit: 'mm', format: 'a3', orientation: 'portrait' }
        jsPDF: { unit: 'mm', format: 'a0', orientation: 'portrait' }
    };

    html2pdf().from(element).set(options).save();
}

const tableRowClassName = ({row,rowIndex}) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#fdf6ec' };
    } else {
        return { backgroundColor: '#f0f9eb' };
    }
}
// 处理菜单项选择事件
const handleMenuSelect = (index) => {
    // 更新激活的菜单项
    activeMenu.value = index;
    // 滚动到相应的内容区域
    scrollToSection(index);
};

// 滚动到指定的内容区域
const scrollToSection = (sectionId) => {
    const section = document.getElementById(sectionId);
    const container = document.querySelector('.content-to-export');
    if (section && container) {
        // 计算目标元素的顶部相对于容器顶部的位置
        let sectionTop = section.offsetTop;

        // 循环遍历，累加所有父元素的offsetTop值，直到达到container
        let parent = section.offsetParent;
        while (parent !== container && parent !== null) {
            sectionTop += parent.offsetTop;
            parent = parent.offsetParent;
        }

        // 使用容器的 scrollTo 方法实现平滑滚动
        container.scrollTo({
            top: sectionTop - container.offsetTop,
            behavior: 'smooth'
        });
    }
};



const updateSidebarHighlight = () => {
    const container = document.querySelector('.content-to-export');
    const sections = document.querySelectorAll('.content-to-export > .box-card');
    let currentActive = null;
    let minDistance = Infinity;
    sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        const containerRect = container.getBoundingClientRect();
        const topDistance = Math.abs(rect.top - containerRect.top);

        // 查找与容器顶部距离最近的章节
        if (topDistance < minDistance) {
            minDistance = topDistance;
            currentActive = section.id;
        }
    });
    if (currentActive) {
        activeMenu.value = currentActive;
    }
};

</script>


<style scoped lang="scss">
$active-gradient: linear-gradient(to right, #60a5fa, #d9e8fc); // 激活状态的渐变色
$inactive-gradient: linear-gradient(to right, #f4ece8, #898485); // 非激活状态的渐变色
$underline-height: 2px; // 下划线的高度
$underline-offset: 10px; // 下划线与文字的间距
// 定义一个mixin用于渐变背景
@mixin gradient-bg($startColor, $endColor) {
    background: $startColor; // 老的浏览器兼容
    background: linear-gradient(to right, $startColor, $endColor);
}
$inactive-gradient-start: #60a5fa; // 非激活状态的开始颜色
$inactive-gradient-end: #378CE7; // 非激活状态的结束颜色
$active-gradient-start: #005eff; // 激活状态的开始颜色
$active-gradient-end: #0a5ff2; // 激活状态的结束颜色
@media print {
    .avoid-page-break {
        page-break-inside: avoid !important;
    }
}
.outerBox {
    display: flex;
    // width: 1425px;
    border: 1px solid rgb(208, 199, 201);
    border-radius: 10px;
    box-shadow: 1px -8px 11px 1px rgba(0, 0, 0, 0.1);
    background-color: #f4f4fc;
    .sidebar {
            /* 隐藏横向滚动条 */
            background: linear-gradient(to bottom right, #DFF5FF, rgb(201 104 30 / 0%));
            backdrop-filter: blur(5px);
        .sidebar-menu {
                    box-sizing: border-box;
                    padding: 60px;
                    width: 304px;
                    margin: 30px 0 0 -11px;
                    border-radius: 10px;
                    // overflow-x: hidden;
                    background-color: transparent;
                // 应用渐变背景
                // @include gradient-bg(#f4ece8, #898485);
            // border: 5px solid rgb(208, 199, 201);
                .el-menu-item {
                    color: #496773;
                    font-size: 12px;
                    position: relative; // 为伪元素定位做准备
                    margin-bottom: $underline-offset; // 为下划线留出空间
                    &:not(.is-active)::after {
                        content: '';
                            position: absolute;
                            bottom: -$underline-height;
                            left: 0;
                            right: 0;
                            height: $underline-height;
                            background: linear-gradient(to right, $inactive-gradient-end, transparent); // 从粗到细的渐变效果
                            border-radius: 1px;
                    }
        
                    &.is-active::after {
                        content: '';
                            position: absolute;
                            bottom: -$underline-height;
                            left: 0;
                            right: 0;
                            height: $underline-height + 1px;
                            background: linear-gradient(to right, $active-gradient-end, transparent); // 激活状态也应用渐变
                            border-radius: 1px;
                    }
                    &:hover {
                        background-color: #d9e8fc9c; // 鼠标悬停时的背景色
                        &::after {
                            background: linear-gradient(to right, $active-gradient-end, transparent); // 保持渐变效果
                        }
                    }
                }
            }
    }

    .content-to-export {
        // border: 3px solid pink;
        overflow-y: auto;
        /* 允许垂直方向上的滚动 */
    overflow-x: hidden;
        height: 100vh;
        /* 或者根据您的布局需求设定固定高度 */
        // flex: 1;
        margin-left: 40px;
        &::-webkit-scrollbar {
                width: 10px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #60a5fa87;
            /* 设置滚动条滑块颜色 */
            border-radius: 10px;
            /* 设置滚动条滑块圆角 */
        }
        // background-color: #e4a2a2;
        // margin-left: 150px;
        .headerTest{
            // width: 1022px;
            width: 100%;
            background-color: #d9e8fc;
            color: #64748b;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
            // font-size: global-font-size;
            font-family: Arial, sans-serif;
            border-radius: 5px;
            border-left: 5px solid #60a5fa;
            border-top: none;
            border-right: none;
            border-bottom: none;
            margin-bottom: 10px;
        }
        .box-card {
            margin-bottom: 8px;
            padding: 10px;
            width: 100%;
            .tableCard{
                background-color: #f4f4fc;
                // padding-bottom: 20px;
                border-radius: 10px;
                .leftTableOF_tableCard{
                    width: 50%;
                    float: left;
                    border:2px solid #e7dede;
                    border-right: none;
                    margin-bottom: 20px;
                    // ::v-deep .el-table {
                    //         .el-table-column {
                    //             border-right: 2px solid #0a5ff2; 
                    //             &:last-child {
                    //                 border-right: none;
                    //             }
                    //         }
                    // }
                }
                .rightTableOF_tableCard{
                    width: 50%;
                    float: left;
                    border:2px solid #e7dede;
                    border-left: none;
                }
            }
            .card-header {
                border-bottom: 2px dashed #ccc;
                margin-bottom: 14px;
                padding-bottom: 10px;
                span{
                    font-weight: bold;
                    font-size: 16px;
                }
            }
            .statementBox{
                // color: rgb(235, 200, 200);
                letter-spacing: 2px;
                font-size: 13px;
                padding: 10px;
                ol{
                    li{
                        padding: 10px;
                    }
                }
            }
            .descBox{
                color: #ccc;
                font-size: 12px;
                padding: 10px 0px;
            }
            .supportLink{
                padding: 10px;
                font-size: 14px;
            }
        }
    }
}

.diagonal-split-header {
    position: relative;
    height: 60px;
}

.text-part {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagonal-line {
    position: absolute;
    width: 200%;
    top: -48px;
    left: 9px;
    height: 100px;
    background: transparent;
    transform: rotate(-152deg);
    border-top: 1px solid #807878;
}
</style>
